from volcenginesdkarkruntime import Ark

client = Ark(
    api_key="780242c1-b80a-43d1-b5a1-fcc5bea20248",
    base_url="https://ark.cn-beijing.volces.com/api/v3"
)


def generate_vue_component(prompt):
    response = client.chat.completions.create(
        model="deepseek-r1-250120",
        messages=[
            {"role": "system", "content": """你是一个专业的前端架构师，请将以下AngularJS代码转换为Vue 2格式，
            其中遇到$http时使用fetch替换
            其中遇到baseService时使用axios替换
            其中遇到$sessionStorage时使用sessionStorage替换
            其中遇到$scope.pageParam时使用vue中的props替换
            其中遇到ht-tree使用orgTree替换
            注意：用户输入的angularjs中的html代码按照我下面的模板代码转换成vue2
            <template>
              <div class="fullheight">
                <ht-table
                  @load="loadData"
                  :data="data"
                  :pageResult="pageResult"
                  :selection="true"
                  quick-search-props="projectSystemCode"
                  :show-export="false"
                  :show-custom-column="true"
                  @selection-change="handleSelectionChange"
                  ref="htTable">
                  <template v-slot:toolbar>
                    <el-button-group>
                      <el-button type="primary" size="small" @click="showDialog('add')" icon="el-icon-plus">添加</el-button>
                      <el-button type="danger" size="small" @click="showDeleteDlg()" icon="el-icon-plus">删除</el-button>
                      <el-button size="small" @click="exportFile()" icon="el-icon-download">导出</el-button>
                    </el-button-group>
                  </template>
                  <template v-slot:search>
                    <ht-table-search-panel :label-width="120" :divide="3">
                      <ht-table-search-field
                        label="所属组织"
                        prop="org"
                        operation="EQUAL"
                        type="custom"
                        clearable
                        ref="custom_org">
                        <template #custom>
                          <orgTree v-model="queryOrg"></orgTree>
                        </template>
                      </ht-table-search-field>
                      <ht-table-search-field
                        label="楼栋"
                        ref="buildingCode"
                        prop="buildingCode"
                        operation="EQUAL"
                        type="select"
                        :props="{ key: 'buildingCode', value: 'buildingName' }"
                      />

                      <ht-table-search-field label="楼栋名称" prop="buildingName" operation="LIKE"/>
                      <ht-table-search-field
                        label="是否启用"
                        prop="enabledFlag"
                        operation="EQUAL"
                        type="select"
                        :options="[{key:'0', value: '否'},{key: 1, value: '是'}]"
                      />
                    </ht-table-search-panel>
                  </template>
                  <template>
                    <ht-table-column type="index" width="50" align="center" label="序号"/>
                    <ht-table-column prop="divideName" label="所属组织" :show-overflow-tooltip="true"></ht-table-column>
                    <ht-table-column
                      prop="buildingCode"
                      label="楼栋编码"
                      :show-overflow-tooltip="true"
                    ></ht-table-column>
                    <ht-table-column
                      prop="buildingName"
                      label="楼栋名称"
                      :show-overflow-tooltip="true"
                    ></ht-table-column>
                    <ht-table-column
                      prop="buildingInnerName"
                      label="楼栋别名"
                      :show-overflow-tooltip="true"
                    ></ht-table-column>
                    <ht-table-column
                      prop="floorCount"
                      label="楼栋层数"
                      :show-overflow-tooltip="true"
                    ></ht-table-column>
                    <ht-table-column
                      prop="enabledFlagName"
                      label="状态"
                      :show-overflow-tooltip="true"
                      width="130"
                    ></ht-table-column>
                    <ht-table-column
                      prop="workRoleName"
                      label="操作"
                      :show-overflow-tooltip="true"
                      width="220">
                      <template v-slot="{ row }">
                        <el-button @click="showDialog('edit', row.id)" type="success" plain>修改</el-button>
                        <el-button type="success" @click="showDialog('view', row.id)" plain>查看</el-button>
                        <el-button :type="row.enabledFlag == 1 ?'danger':'success'" plain @click="disEnable(row.id, row.enabledFlag)">
                          {{ row.enabledFlag == 1 ? '禁用' : '启用' }}
                        </el-button>
                      </template>
                    </ht-table-column>
                  </template>
                </ht-table>
                <dlg ref="dlg" width="40%" @onSuccess="$refs.htTable.load();"></dlg>
              </div>
            </template>
            <script>
            import OrgTree from '@/components/orgTree/OrgTree'
            import dlg from './dlg'
            export default {
              name: 'projectSystemInfoManager',
              components: {
                orgTree: OrgTree,
                dlg
              },
              data () {
                return {
                  buildingList: [],
                  resourceTypeTree: [],
                  queryOrg: [],
                  queryRes: [],
                  orgTreeData: [],
                  removeIds: [],
                  dialogVisible: false,
                  data: [],
                  pageResult: {
                    page: 1,
                    pageSize: 50,
                    total: 0
                  },
                  ProjectSystemInfo: {},
                  saveMethod: 'POST',
                  lines: [],
                  // 作业角色列表
                  workRoleList: [],
                  // 事项分类列表
                  matterTypeList: []
                }
              },
              methods: {
                changeBuilding () {
                },
                disEnable (id, type) {
                  this.$confirm(`您确定要${type == 1 ? '禁用' : '启用'}?`, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                  }).then(() => {

                  })
                },
                // 导出文件
                async exportFile () {
                  let params = this.$refs.htTable.getParams()
                  let res = await mdmApi.exportFile(params)
                  // console.log("res=");
                  let blob = new Blob([res.data], {
                    type:
                      'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8'
                  })
                  let link = document.createElement('a')
                  document.body.appendChild(link)
                  link.href = window.URL.createObjectURL(blob)
                  // 配置下载的文件名
                  link.download = '楼栋信息'
                  link.click()
                },
                handleSelectionChange (rows) {
                  console.log('---rows---', rows)
                  this.removeIds = []
                  rows.forEach(row => {
                    if (row.id) {
                      this.removeIds.push(row.id)
                    }
                  })
                },
                showDeleteDlg () {
                  if (this.removeIds.length == 0) {
                    return this.$message('请先选择数据')
                  }
                  this.$confirm('确定删除该数据？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                  })
                    .then(async () => {
                    })
                    .catch((e) => {
                      console.log('e=', e)
                      this.$message({
                        type: 'info',
                        message: '删除报错'
                      })
                    })
                },
                showDialog (action, id) {
                  this.$validator.reset() // 重置校验
                  if (id) {
                  } else {
                    this.$refs.dlg.open(action)
                  }
                },
                loadData (param, cb) {
                  this.$handleOrgQuery(param)
                  param = JSON.parse(JSON.stringify(param).replace('orgId', 'divideId'))
                  this.$http
                    .post('${mdm}/api/mdm/v1/building/list', param)
                    .then(
                      resp => {
                        console.log('--- loadData ---', resp)
                        let response = resp.data
                        if (response) {
                          cb()
                          this.data = response.rows
                          this.pageResult = {
                            page: response.page,
                            pageSize: response.pageSize,
                            total: response.total
                          }
                        }
                      },
                      error => {
                        reject(error)
                      }
                    )
                    .finally(() => cb())
                }
              }
            }
            </script>

            <style lang="scss" scoped>

            </style>

            只输出转换后的代码，不要任何解释"""},
            {"role": "user", "content": prompt}
        ],
        stream=True
    )

    full_content = []
    for chunk in response:
        if chunk.choices:
            content = chunk.choices[0].delta.content
            if content:
                full_content.append(content)

    return "".join(full_content)
# 测试代码
angularjs_code = """
 

"""

vue_code = generate_vue_component(angularjs_code)
print("转换后的List Vue代码：\n")
print(vue_code)
